import './communityManagement.less';
import { Table } from 'antd'
import React, {FC, useState, useEffect} from "react"
const CommunityManagement:FC = function () {

  const columns:any = [
    { title: '序号',    align:'center', dataIndex: 'key',     key: 'key' },
    { title: '标题',    align:'center', dataIndex: 'name',    key: 'name' },
    { title: '发布时间',align:'center', dataIndex: 'ipohon',  key: 'ipohon' },
    { title: '浏览数',  align:'center', dataIndex: 'address', key: 'address' },
    { title: '状态',    align:'center', dataIndex: 'status',  key: 'status' },
    { title: '操作',    align:'center', dataIndex: '',        key: 'x',
      render: (row:any) => <div>
        <span style={{marginLeft:'8px'}} >编辑</span>
        <span style={{marginLeft:'8px'}}  onClick={()=>setbtnremove(row.key)} >删除</span>
      </div>,
    },
  ];
  let date = new Date()
  function formatDate(date:any) {  
    var y = date.getFullYear();  
    var m = date.getMonth() + 1;  
    m = m < 10 ? '0' + m : m;  
    var d = date.getDate();  
    d = d < 10 ? ('0' + d) : d;  
    return y + '-' + m + '-' + d;  
  };

  const data = [
    {
      key: 1,
      name: '新房购买注意点',
      ipohon:formatDate(date),
      address: '1211',
      status:'已下架'
    },{
      key: 2,
      name: '二手房购买注意点',
      ipohon:formatDate(date),
      address: '1234',
      status:'已下架'
    },{
      key: 3,
      name: '新房购买注意点',
      ipohon:formatDate(date),
      address: '2311',
      status:'已上架'
    },{
      key: 4,
      name: '二手房购买注意点',
      ipohon:formatDate(date),
      address: '1453',
      status:'已上架'
    },{
      key: 5,
      name: '新房购买注意点',
      ipohon:formatDate(date),
      address: '13456',
      status:'已下架'
    },{
      key: 6,
      name: '二手房购买注意点',
      ipohon:formatDate(date),
      address: '41431',
      status:'已下架'
    },{
      key: 7,
      name: '新房购买注意点',
      ipohon:formatDate(date),
      address: '1242',
      status:'已下架'
    },{
      key: 8,
      name: '二手房购买注意点',
      ipohon:formatDate(date),
      address: '31231',
      status:'已上架'
    },{
      key: 9,
      name: '新房购买注意点',
      ipohon:formatDate(date),
      address: '12312',
      status:'已下架'
    },{
      key: 10,
      name: '二手房购买注意点',
      ipohon:formatDate(date),
      address: '43243',
      status:'已上架'
    },{
      key: 11,
      name: '新房购买注意点',
      ipohon:formatDate(date),
      address: '1232',
      status:'已上架'
    },{
      key: 12,
      name: '二手房购买注意点',
      ipohon:formatDate(date),
      address: '2334',
      status:'已下架'
    },{
      key: 13,
      name: '新房购买注意点',
      ipohon:formatDate(date),
      address: '345534',
      status:'已上架'
    },
  ];
  let [title1, settitle1] = useState('')
  let [pagedata, setpagedata] = useState(data)
  let [searchName, setsearchName] = useState('')
  let [btnremove, setbtnremove] = useState('') as any

  useEffect(() => {
    if(searchName){
      let newdata = data.filter(item=>item.name.includes(searchName))
      setpagedata(newdata)
    }
    if(btnremove){
      console.log(btnremove)
      let a = pagedata.filter(item=>item.key!==btnremove)
      setpagedata(a)
    }
  }, [searchName,btnremove])

  function serchall(title1:string){
    setsearchName(title1)
  }
  return (
    <div className='communityManagement'>
      <div className='region_box'>
        <div>手机号:<input type="text" value={title1} onChange={e=>settitle1(e.target.value)}  /></div>
        <button onClick={()=>serchall(title1)} >查询</button>
        <button>新建</button>
      </div>
      <Table columns={columns} dataSource={pagedata} scroll={{ x: 1300 }} />
    </div>
  );
}
export default CommunityManagement